<template>
  <div class="corporation-container">
    <el-form ref="corpForm" :model="corpForm" :rules="rules" class="container-form" autocomplete="on" label-position="left">
      <div class="title-container">
        <h3 class="title">
          企业信息
        </h3>
      </div>

      <div class="corporation-content">
        <!-- 提交的表单项 -->
        <div class="corporation-items">
          <!-- 企业名称 -->
          <el-form-item>
            <el-input
              ref="corporation_cname"
              key="cname"
              v-model="corpForm.cname"
              placeholder="企业名称"
              name="cname"
              type="text"
              tabindex="1"
              autocomplete="off"
            />
          </el-form-item>
          <!-- 企业统一社会信用码 -->
          <el-form-item prop="uscc">
            <el-input
              ref="corporation_uscc"
              key="uscc"
              v-model="corpForm.uscc"
              placeholder="企业统一社会信用码"
              name="uscc"
              type="text"
              tabindex="2"
              autocomplete="off"
            />
          </el-form-item>
          <!-- 公司通讯地址 -->
          <el-form-item>
            <el-input
              ref="corporation_address"
              key="address"
              v-model="corpForm.address"
              placeholder="公司通讯地址"
              name="address"
              type="text"
              tabindex="3"
              autocomplete="off"
            />
          </el-form-item>
          <!-- 企业邮箱 -->
          <el-form-item prop="email">
            <el-input
              ref="corporation_email"
              key="email"
              v-model="corpForm.email"
              placeholder="企业邮箱"
              name="email"
              type="text"
              tabindex="4"
              autocomplete="off"
            />
          </el-form-item>
          <!-- 企业联系电话 -->
          <el-form-item prop="corp_phone">
            <el-input
              ref="corporation_corp_phone"
              key="corporation_corp_phone"
              v-model="corpForm.corp_phone"
              placeholder="企业联系电话"
              name="corp_phone"
              type="text"
              tabindex="5"
              autocomplete="off"
            />
          </el-form-item>
        </div>
        <!-- 营业执照 -->
        <el-upload
          class="corporation-img"
          action="/api/newly-apaas-user/user/upload/company/permit"
          name="permitFile"
          :headers=" { 'enctype': 'multipart/form-data',method: 'post'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :data="param_data">

          <img v-if="is_success" :src="img_url" class="avatar">
          <div v-else class="default-icon">
            <img :src="require('../../assets/img/upload_uscc.png')" alt="">
            <span>上传营业执照</span>
          </div>

        </el-upload>
      </div>
      <!-- 尾部 确认按钮 -->
      <div class="corporation-footer">
        <el-button :class="corporation_loading? 'footer-active':'footer-default' " type="primary" :loading="corporation_loading" @click.native.prevent="commitInfo">确认</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { validMobile, validFixed, validEmail, validSocialCredit } from '@/utils/validate'
import { commitCorporation, commitCertificate } from '@/api/login'
import Qs from 'qs'

export default {
  name: 'Corporation',
  // components: { SocialSign },
  data() {
    const validateCorpphone = (rule, value, callback) => {
      if (!validMobile(value) && !validFixed(value)) {
        callback(new Error('电话号格式不正确!  例:151xxxxxxxx, 0779-xxxxxxxx'))
      } else { callback() }
    }
    const validateUscc = (rule, value, callback) => {
      if (!validSocialCredit(value)) {
        callback(new Error('统一社会信用码格式不正确!'))
      } else { callback() }
    }
    const validateEmail = (rule, value, callback) => {
      if (!validEmail(value)) {
        callback(new Error('邮箱格式不正确!'))
      } else { callback() }
    }

    const that = this
    return {
      img_url: '',
      rules: {
        uscc: [{ required: true, trigger: 'blur', validator: validateUscc }],
        email: [{ required: true, trigger: 'blur', validator: validateEmail }],
        corp_phone: [{ required: true, trigger: 'blur', validator: validateCorpphone }]
      },
      corpForm: {
        cname: '',
        uscc: '',
        address: '',
        email: '',
        corp_phone: '',

        phone: '',
        password: ''
      },
      certificate: '', // 营业执照
      is_success: false, // 营业执照是否上传成功
      mark: '', // 用户的标识 56a2-1622119438192-5336
      corporation_loading: false,
      redirect: undefined, // 登录成功后跳转的路径
      otherQuery: {}
    }
  },
  computed: {
    param_data() {
      if (this.corpForm.password && this.corpForm.phone) {
        const cryptograph = this.$sha256(this.corpForm.password + this.corpForm.phone)
        return { 'phone': this.corpForm.phone, 'password': cryptograph }
      } else { return {} }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    // window.addEventListener('storage', this.afterQRScan)
    this.mark = this.$route.query.my_mark
    this.corpForm.phone = window.localStorage.getItem('phone' + this.mark)
    this.corpForm.password = window.localStorage.getItem('password' + this.mark)
  },
  mounted() {
    // if (this.corpForm.userphone === '') {
    //   this.$refs.userphone.focus()
    // } else if (this.corpForm.password === '') {
    //   this.$refs.password.focus()
    // }

  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    // 上传文件: 前置钩子
    beforeAvatarUpload(file) {
      this.certificate = file

      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png')
      const isLt10M = file.size / 1024 / 1024 < 10

      if (!isJPG) {
        this.$message.error('营业执照图片只能是 JPG/JPEG/PNG!')
      }
      if (!isLt10M) {
        this.$message.error('营业执照图片大小不能超过 10MB!')
      }
      return isJPG && isLt10M
    },
    // 添加图片成功
    handleAvatarSuccess(res, file, filelist) {
      //  转成url ###
      this.img_url = URL.createObjectURL(file.raw)

      if (res.code == 200) {
        this.is_success = true

        // this.$router.replace('/login')   // 页面跳转
      }
    },

    // 1 提交企业信息=======================================================================================
    commitInfo() {
      if (!this.is_success) {
        this.$message({
          message: '请上传营业执照!',
          type: 'error',
          duration: 4000,
          showClose: true,
          center: true
        })
      } else {
        const cryptograph = this.$sha256(this.corpForm.password + this.corpForm.phone)
        this.reg_loading = true
        // 发送提交企业信息的 网络请求,
        commitCorporation(this.corpForm.phone, cryptograph,
          this.corpForm.cname, this.corpForm.uscc, this.corpForm.address,
          this.corpForm.email, this.corpForm.corp_phone).then(res => {
          if (res.code == 200) {
            this.$message({
              message: '提交成功!',
              type: 'success',
              duration: 4000,
              showClose: true,
              center: true
            })
            // 成功之后
            this.reg_loading = false
            window.localStorage.removeItem('phone' + this.mark)
            window.localStorage.removeItem('password' + this.mark)
            this.$router.replace('/login')
          }
        }).catch(() => {
          this.reg_loading = false
        })
      }
    },

    // 获取请求参数
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>

<style lang="scss" scoped>
$bg:rgba(0,0,0,0);
$cursor: #5E5E5E;

$bgc: #fff;
$dark_text: #5E5E5E;
$light_text: #B3B3B3;
$theme_color: rgba(15, 139, 253, 1);
$theme_color_light: rgba(15, 139, 253, 0.5);
$text_color: #fff;

.corporation-container {
  width: 100%;
  height: 100%;
  min-width: 992px;
  min-height: 540px;
  overglow: hidden;
  background-color: #ECF2F9;
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: center;

  .container-form {
    width: 960px;
    height: 520px;
    background: $bgc;
    box-shadow: 0px 8px 29px 0px rgba(6, 55, 100, 0.5);
    border-radius: 20px;
    position: relative;
    padding: 25px 50px;
    margin: 0 auto;
    overflow: hidden;

    .title-container {
      position: relative;
      .title {
        font-size: 26px;
        margin-bottom: 25px;
        text-align: left;
        font-weight: bold;
        font-family: Microsoft YaHei;
      }
    }

    .corporation-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .corporation-items {
        flex: 1;
        // background-color: brown;

        .el-form-item {
          // border-bottom: 1px solid rgba(239, 239, 239, 1);
          background: rgba(0, 0, 0, 0);
          color: $dark_text;
          margin-bottom: 25px;
        }
        .el-input {
          // background-color: salmon;
          display: inline-block;
          // height: 47px;
          // width: 70%;

          input {
            background: transparent;
            border: 0px;
            -webkit-appearance: none;
            border-radius: 0px;
            padding: 12px 5px 12px 15px;
            color: $dark_text;
            height: 47px;
            caret-color: $cursor;

            &:-webkit-autofill {
              box-shadow: 0 0 0 1000px $bg inset !important;
              -webkit-text-fill-color: $cursor !important;
            }
          }
        }
      }

      .corporation-img {
        margin-left: 20px;
        width: 210px;
        height: 280px;
        border: 1px solid #A9A9A9;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        background: #FFFFFF;
        box-shadow: 0px 5px 10px 0px rgba(6, 55, 100, 0.5);
        border-radius: 10px;

        .avatar {
          background-color: chocolate;
          width: 100%;
          height: 100%;
        }

        .default-icon {
          width: 210px;
          height: 280px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            width:55px;
            height: 45px;
          }
          span {
            font-size: 13px;
            font-family: Microsoft YaHei;
            color: $light_text;
            line-height: 22px;
          }
        }
      }
      .corporation-img:hover {
        border-color: $theme_color;
      }

    }
    .corporation-footer{
      margin-top: 20px;
      width: 100%;
      display: flex;
      justify-content: center;
      .el-button {
        width: 60%;
        height: 49px;
        box-shadow: 0px 2px 14px 0px rgba(15, 139, 253, 0.5);
        border-radius: 25px;

        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: $text_color;
        &:hover {
          text-decoration: underline;
        }
      }
      .footer-active {
        // background: rgba(15, 139, 253, 0.5);
        text-decoration: none !important;
      }
      .footer-default {
        // background: #0F8BFD;
      }
    }
  }
}

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }
</style>
